import React, { act } from "react";
import * as echarts from "echarts";
import chinaJson from "./china.json";
import { GeoComponent, VisualMapComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";

import EchartType from "./EchartType";
import "./index.scss";
import Heatmap from "./Heatmap";
import HeatmapPolygon from "./HeatmapPolygon";
import { Tabs , Radio} from 'antd';

// 注册地图（仅在未注册的情况下注册）
if (!echarts.getMap("china")) {
  // 使用必要的 ECharts 组件
  echarts.use([GeoComponent, VisualMapComponent, CanvasRenderer]);
  echarts.registerMap("china", chinaJson);
}

/**
 * @description 首页
 **/
export default function Home(props) {
  const [activekey, setActivekey] = React.useState('1')

  return (
    <div className="charts-container">
      <div className="chart-left-container">
        <EchartType />
        <EchartType type="4" />
        <EchartType type="3" />
        <EchartType type="2" />
      </div>
      <div className="chart-right-container">
        <div className="echart-map">
          <Radio.Group value={activekey} onChange={(e) => setActivekey(e.target.value)}>
            <Radio.Button value="1">点热力图</Radio.Button>
            <Radio.Button value="2">面等值图</Radio.Button>
          </Radio.Group>
          {/* <EchartType type="5" /> */}
          {activekey === '1' && <Heatmap />}
          {activekey === '2' && <HeatmapPolygon type="5" />}
        </div>
        <div>
          <EchartType type="2.1" />
        </div>
      </div>
    </div>
  );
}
